<template>
  <div class="position-container" :style="containerStyle">
    <p v-if="title" class="title">{{ title }}</p>
    <div class="image-container" :style="imageContainerStyle">
      <p v-if="description" class="description">{{ description }}</p>
      <el-image :src="getImage()" :preview-src-list="previewImages" 
        :alt="description" lazy fit="contain" preview-teleported>
        <template #preview-extra>
          <div class="zoom-icon">
            <i class="el-icon-zoom-in"></i>
          </div>
        </template>
        <div slot="error" class="image-error">
          <i class="el-icon-picture-outline"></i>
          <span>图片加载失败</span>
        </div>
      </el-image>
    </div>
  </div>
</template>

<script>
// 常量配置
export default {
  name: 'Position',
  props: {
    title: String,
    imgName: {
      type: String,
      required: true,
      validator: value => value?.trim().length > 0
    },
    description: String,
    width: {
      type: [String, Number],
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '180px'
    },
    customStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      previewImages: [],
      imageLoadError: false
    };
  },
  computed: {
    containerStyle() {
      return {
        width: this.formatSize(this.width),
        ...this.customStyle
      }
    },
    imageContainerStyle() {
      return {
        height: this.formatSize(this.height)
      }
    }
  },
  methods: {
    formatSize(size) {
      return typeof size === 'number' ? `${size}px` : size
    },
    getImage() {
      try {
        const image = require(`@/assets/bcp/${this.imgName}`);
        this.imageLoadError = false;
        return image;
      } catch {
        this.imageLoadError = true;
        return '';
      }
    }
  },
  mounted() {
    const image = this.getImage();
    if (image) {
      this.previewImages = [image];
    }
  }
}
</script>

<style scoped lang="scss">
// 增强的响应式断点系统
$breakpoints: (
  'xs': 480px,    // 超小屏幕
  'sm': 768px,    // 平板
  'md': 992px,    // 小桌面
  'lg': 1200px,   // 大桌面
  'xl': 1440px    // 超大屏幕
);

@mixin respond-to($breakpoint, $type: 'max') {
  @if map-has-key($breakpoints, $breakpoint) {
    @if $type == 'max' {
      @media (max-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    } @else {
      @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    }
  }
}

// 触摸屏检测
@mixin touch-device {
  @media (hover: none) and (pointer: coarse) {
    @content;
  }
}

.position-container {
  padding-bottom: 5px;

  .title {
    position: relative;
    margin-bottom: 8px;
    padding-left: 12px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.3s ease;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      width: 4px;
      background-color: #409EFF;
      border-radius: 2px;
      transition: all 0.3s ease;
    }

    @media (hover: hover) {
      &:hover {
        color: #409EFF;
        padding-left: 16px;

        &::before {
          width: 6px;
          background-color: #66b1ff;
        }
      }
    }

    @include respond-to('sm') {
      font-size: 13px;
      margin-bottom: 6px;
      padding-left: 10px;

      &::before {
        width: 3px;
        top: 1px;
        bottom: 1px;
      }

      @media (hover: hover) {
        &:hover {
          padding-left: 12px;
          
          &::before {
            width: 4px;
          }
        }
      }
    }
  }

  .description {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 1;

    @include respond-to('sm') {
      font-size: 11px;
      bottom: 6px;
      left: 6px;
      right: 6px;
    }
  }

    .image-container {
      $container-bg: #f5f5f5;
      $shadow-color: rgba(0, 0, 0, 0.1);

      position: relative;
      margin: 10px 0;
      border-radius: 8px;
      background-color: $container-bg;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px $shadow-color;
      min-height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      @include respond-to('sm') {
        min-height: 80px;
        margin: 8px 0;
        border-radius: 6px;
      }

      @include touch-device {
        &:active {
          transform: scale(0.98);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }
      }

      @media (hover: hover) {
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          cursor: pointer;
        }
      }

    .el-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .zoom-icon {
      position: absolute;
      right: 15px;
      bottom: 15px;
      z-index: 9999;
      background: #409EFF;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      border: 2px solid #fff;
      touch-action: manipulation;

      @include respond-to('sm') {
        width: 30px;
        height: 30px;
        right: 10px;
        bottom: 10px;
      }

      i {
        color: #fff;
        font-size: 22px;
      }

      @media (hover: hover) {
        &:hover {
          background: #66b1ff;
          transform: scale(1.2);
        }
      }

      @include touch-device {
        &:active {
          background: #66b1ff;
          transform: scale(0.95);
        }
      }
    }

    .image-error {
      color: #999;
      font-size: 14px;
      text-align: center;

      @include respond-to('sm') {
        font-size: 12px;
      }

      i {
        font-size: 24px;
        display: block;
        margin-bottom: 8px;

        @include respond-to('sm') {
          font-size: 20px;
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>
